<template>
  <div class="background_style">
    <div class="tu">
      <!--      <img src="../assets/logo.png" alt="" />-->
    </div>
    <div class="login-section">
      <h3>请登录</h3>
      <el-form
        @submit.native.prevent
        label-position="top"
        label-width="100px"
        class="demo-ruleForm"
        :rules="rules"
        :model="rulesForm"
        status-icon
        ref="ruleForm"
      >
        <el-row>
          <el-col :span="2">
            <svg-icon
              style="font-size: 20px; margin-top: 8px;"
              icon-class="peoples"
            />
          </el-col>
          <el-col :span="22">
            <el-form-item prop="name">
              <el-input
                type="text"
                v-model="rulesForm.name"
                placeholder="请输入账号"
                @keyup.enter.native="submitForm('ruleForm')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="2">
            <svg-icon
              style="font-size: 20px; margin-top: 8px;"
              icon-class="password"
            />
          </el-col>
          <el-col :span="22">
            <el-form-item prop="password">
              <el-input
                type="password"
                v-model="rulesForm.password"
                placeholder="请输入密码"
                @keyup.enter.native="submitForm('ruleForm')"
              ></el-input>
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item>
          <el-button :loading="loading" type="primary" @click="submitForm('ruleForm')" class="btn"
          >登录
          </el-button
          >
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
// import { login } from "@/service/api";
export default {
  data() {
    return {
      loading: false,
      rulesForm: {
        name: "",
        password: "",
        remember: false
      },
      rules: {
        name: [
          { required: true, message: "请输入名字", trigger: "blur" },
          { min: 1, max: 10, message: "长度3-10", trigger: "blur" }
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 10, message: "长度3-10", trigger: "blur" }
        ]
      }
    };
  },
  created() {
    this.$nextTick(() => {
      // 禁用右键
      // document.oncontextmenu = new Function("event.returnValue=false");
      // 禁用选择
      document.onselectstart = new Function("event.returnValue=false");
    });
  },
  computed: {
    // 获取页面高度
    documentHeight() {
      return this.$store.getters.documentHeight;
    },
    lastHeight() {
      return this.documentHeight - 133;
    }
  },
  mounted() {
    document.addEventListener("keydown", this.handleKeyDown);
  },
  beforeDestroy() {
    document.removeEventListener("keydown", this.handleKeyDown);
  },
  methods: {
    handleKeyDown(event) {
      if (event.keyCode === 13) {
        this.submitForm("ruleForm");
      }
    },
    //登录
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          const form = new FormData();
          form.append("username", this.rulesForm.name);
          form.append("password", this.rulesForm.password);
          this.$http.post("/login", form).then((res) => {
            console.log(res);
            if (res.code === "200") {
              sessionStorage.setItem("token", "true");
              sessionStorage.setItem("chn", this.rulesForm.name);
              this.$store.commit("SET_CHN", this.rulesForm.name);
              this.$router.push({ path: "/" });
            } else {
              sessionStorage.setItem("token", "false");
            }
          }).finally(() => {
            this.loading = false;
          }).catch(() => {
            this.loading = false;
          });
          // login(form).then((res) => {
          //   if (res.state === "登陆成功") {
          //     this.$router.push("/");
          //     this.loading = false;
          //     this.$notify({
          //       title: "登录成功",
          //       message: `Hi, ${getTime()}好`,
          //       type: "success",
          //     });
          //     //将token信息存入localStorage用于不同页面的通讯
          //     sessionStorage.setItem("token", res.msg.token);
          //     localStorage.setItem("item", res.msg.perms);
          //     this.$store.commit("setRightList", res.msg.menuList);
          //     this.$store.commit("setUsername", res.msg.sysUser.username);
          //     this.$store.commit("setName", res.msg.sysUser.comname);
          //     this.$router.push("/");
          //   } else {
          //     this.$message({
          //       showClose: true,
          //       message: "账号或密码错误，请联系管理员",
          //       type: "warning",
          //     });
          //   }
          // });
        } else {
          // this.$message({
          //   showClose: true,
          //   message: "账号或密码错误，请联系管理员",
          //   type: "warning"
          // });
          // return false;
        }
      });
    }
  }
};
</script>

<style lang="less" scoped>
.login-section {
  text-align: center;
  width: 300px;
  height: 320px;
  border: 1px solid rgb(220, 217, 217);
  padding: 10px;
  border-radius: 15px;
  position: absolute;
  top: 250px;
  left: 1300px;
  right: 0;
  bottom: 0;
  // margin: auto;
  padding: 50px 40px 20px 40px;
  box-shadow: -15px 15px 15px rgba(192, 182, 182, 0.1);
  opacity: 1;
  background: linear-gradient(230deg,
    //rgba(234, 220, 220, 0) 0%,
  rgb(192, 182, 182) 100%);

  .demo-ruleForm {
    margin-top: 20px;
  }

  .btn {
    //margin-left: 58px !important;
    margin-top: 20px !important;
    border-radius: 20px;
    width: 130px;
  }

  h3 {

    color: #625b5b;
  }

  ::v-deep .el-input__inner {
    // -webkit-appearance: none;
    background: none;
    border-radius: 4px;
    border: 1px solid #999999;
    box-sizing: border-box;
    color: #625b5b;
    display: inline-block;
    font-size: inherit;
    height: 40px;
    line-height: 40px;
    outline: 0;
    padding: 0 15px;
    transition: border-color 0.2s cubic-bezier(0.645, 0.045, 0.355, 1);
    width: 100%;
    border: 0;
  }
}

.background_style {
  width: 100%;
  height: 100%;
  position: fixed;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-image: url("../assets/login.jpg");

  .tu {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 10px;
    margin-top: 16px;

    img {
      width: 450px;
    }
  }
}
</style>
